<template>
	<view class="lead">
		<!-- 上方大背景 -->
		<view class="top-back">
			<image
				src="https://warmstill-1314066575.cos.ap-chengdu.myqcloud.com/warmstill/2022/11/10/2924b0d7-8a8d-44d6-9f39-66db31d58c4dimage/jpg">
			</image>
			<view class="first-title">
				<text>{{testbar.name}}</text>
			</view>
			<view class="second-title">
				<text>{{testbar.scoring_criteria}}</text>
			</view>
		</view>
		<!-- 悬挂区域 -->
		<view class="hang-textra">
			<!-- 每一个 -->
			<view>
				<!-- 左侧小图标 -->
				<view class="left-icon">
					<image src="../../static/image/火苗.png"></image>
				</view>
				<view class="right-smallt">
					<text>已测:  万人</text>
				</view>
				<view>|</view>
			</view>
			<!-- 每一个 -->
			<view>
				<!-- 左侧小图标 -->
				<view class="left-icon">
					<image src="../../static/image/火苗.png"></image>
				</view>
				<view class="right-smallt">
					<text>题目:  道精选</text>
				</view>
				<view>|</view>
			</view>
			<!-- 每一个 -->
			<view>
				<!-- 左侧小图标 -->
				<view class="left-icon">
					<image src="../../static/image/火苗.png"></image>
				</view>
				<view class="right-smallt">
					<text>专业报告: 页</text>
				</view>
			</view>
		</view>
		<!--测评介绍  -->
		<view class="text-instroduce">
			<!-- 大标题 -->
			<view class="big-title">
				<view class="small-title">
					测评介绍
				</view>
				<view class="bottom"></view>
			</view>
			<!-- 测评具体介绍 -->
			<view class="text-detail">
				<!-- 第一块 -->
				<view class="detail-first">
					<!-- 小标题 -->
					<view class="small-first">
						<view class="title-left"></view>
						<view class="title-right">{{testbar.standard}}</view>
					</view>
					<!-- 具体内容 -->
					<view class="deta-cont1">
						<text>
							<!-- {{tdata.detailCont}} -->
						</text>
					</view>
				</view>

			</view>
			<!--  -->

		</view>
		<!-- 最后按钮 -->
		<view class="last-cont">
			<!-- 左方收藏图标 -->
			<view class="left-sc">
				<image
					src="https://warmstill-1314066575.cos.ap-chengdu.myqcloud.com/warmstill/2022/11/10/22cee061-0769-41db-8e79-1b387a0e6cbeimage/png">
				</image>
			</view>
			<!-- 右方按钮 -->
			<view class="right-btn" @click="goDotest()">立即测试</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				textInsDataList: [{
						smalltitle: `你的性格,\u2000决定了你适合的工作`,
						detailCont: '找到自己的性格优势,走适合自己的路,才能把个人潜能发挥到极致,从工作中获得成就感'
					},
					{
						smalltitle: `跟别人比,\u2000你最大的优势在哪里?`,
						detailCont: '本次测试从动力、信息收集、决策方式、生活方式4个关键要素，结合职业性格、职业倾向，评估你的性格优劣势，推荐最适合你的工作岗位及发展建议'
					},
				],
				testbar:{},
				index: '',
			}
		},
		onLoad(options) {
			// console.log("testlead-options",options)
			// this.uuid = options.uuid
			var index = options.index
			this.index = options.index
			this.testbar = this.$store.state.test.testbar[index]
			// console.log(this.testbar)
		},
		methods: {
			goDotest(){
				var uuid = this.testbar.uuid
				var index = this.index
				// console.log(uuid)
				uni.navigateTo({
					url: '/pages/Dotest/index?uuid='+uuid+ '&index='+index
					// url:'/pages/Grades/index'
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.lead {
		width: 750rpx;
		height: auto;

		.top-back {
			width: 750rpx;
			height: 400rpx;
			background-color: antiquewhite;
			position: relative;

			image {
				width: 100%;
				height: 100%;
			}

			.first-title {
				width: 100%;
				font-size: 50rpx;
				color: #fff;
				position: absolute;
				font-weight: 600;
				top: 100rpx;
				text-align: center;
				// left: 35%;
				// padding-left: 35%;
			}

			.second-title {
				width: 100%;
				font-size: 35rpx;
				color: #fff;
				position: absolute;
				top: 210rpx;
				text-align: center;
				// left: 45%;
			}
		}

		// 
		.hang-textra {
			width: 90%;
			height: 80rpx;
			margin: 0 auto;
			// background-color: antiquewhite;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			position: relative;
			top: -40rpx;
			background-color: #fff;
			box-shadow: 2px 3px #ccc;

			view {
				margin-left: 10rpx;
				width: 240rpx;
				display: flex;
				align-items: center;
				font-size: 20rpx;
				// background-color: aqua;
				margin-left: 12rpx;

				.left-icon {
					width: 30rpx;
					height: 30rpx;
					margin-right: 5rpx;
					// background-color: #ccc;

					image {
						width: 100%;
						height: 100%;

					}

				}

				.right-smallt {
					// background-color: antiquewhite;
					width: 150rpx;
					height: 100%;
					text-align: center;
				}

				view {
					width: 2rpx;
					height: 10rpx;
				}
			}
		}

		// 
		.text-instroduce {
			width: 750rpx;
			height: auto;
			overflow-y: auto;

			.big-title {
				width: 500rpx;
				height: 70rpx;
				margin: 0 auto;

				.small-title {
					width: 200rpx;
					margin: 0 auto;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					font-size: 32rpx;
					font-weight: 550;
				}

				// 
				.bottom {
					width: 80rpx;
					height: 8rpx;
					background-color: #dc5a5a;
					margin: 0 auto;
				}

				// 
			}

			// 
			.text-detail {
				width: 650rpx;
				height: auto;
				background-color: #efefef;
				margin: 0 auto;

				// 
				.detail-first {
					width: 90%;
					height: auto;
					padding-bottom: 60rpx;

					&:last-child {
						padding-bottom: 200rpx;
					}

					.small-first {
						width: 100%;
						height: auto;
						display: flex;
						align-items: center;
						justify-content: space-around;
						padding-left: 30rpx;
						padding-top: 30rpx;

						.title-left {
							width: 8rpx;
							height: 45rpx;
							background-color: #dc5a5a;

						}

						.title-right {
							width: 90%;
							line-height: 70rpx;
							height: 100%;
							font-size: 34rpx;


						}

						// 
					}

					// 
					.deta-cont {
						width: 85%;
						margin: 0 auto;
						height: auto;
						font-size: 33rpx;
						line-height: 55rpx;
						color: #6b6b6b;
						padding-left: 60rpx;
					}
					.deta-cont1 {
						width: 85%;
						margin: 0 auto;
						height: auto;
						font-size: 33rpx;
						line-height: 55rpx;
						color: #6b6b6b;
						padding-left: 60rpx;
					}
				}

				// 
			}


		}

		// 
		.last-cont {
			width: 750rpx;
			height: 100rpx;
			// background-color: #ccc;
			display: flex;
			align-items: center;
			z-index: 100;
			position: fixed;
			bottom: 20rpx;

			.left-sc {
				width: 150rpx;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #fff;

				image {
					width: 40%;
					height: 55%;
				}
			}

			.right-btn {
				width: 690rpx;
				height: 100rpx;
				text-align: center;
				line-height: 100rpx;
				color: #fff;
				font-weight: 600;
				font-size: 36rpx;
				background-color: #dc5a5a;
			}
		}
	}
</style>
